<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>AI智能翻译</title>
    <style>
      body { width: 320px; padding: 12px; font: 14px/1.4 sans-serif; }
      #text { margin-top: 8px; word-break: break-all; color: #333; }
      
      /* 设置按钮样式 */
      .settings-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        color: #007bff;
      }
      
      /* 设置表单样式 */
      .settings-form {
        display: none;
        margin-top: 10px;
      }

      /* 翻译保存表单样式 */
      .translation-save-form {
        margin-top: 20px;
      }
      
      .form-group {
        margin-bottom: 10px;
      }
      
      .form-group label {
        display: block;
        margin-bottom: 4px;
        font-weight: bold;
      }
      
      .form-group input,
      .form-group select {
        width: 100%;
        padding: 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      
      .save-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
      }
      
      .save-btn:hover {
        background-color: #0056b3;
      }

      /* 返回按钮样式 */
      .back-btn {
        background-color: rgb(233, 73, 73);
        color: #f4f6f8;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
      }

      .back-btn:hover {
        background-color: #f00e0e;
      }
    </style>
  </head>
  <body>
    <button class="settings-btn" id="settingsBtn">设置</button>
    
    <div id="mainContent">
      <h3>AI翻译: </h3>

      <!-- 已保存的翻译列表 -->
      <div class="saved-list" id="savedList">
        <h4>已保存的列表:</h4>
        <ul id="savedAliasesList"></ul>
      </div>

      <!-- 翻译保存表单 -->
      <div class="translation-save-form" id="translationSaveForm">
        <div class="form-group">
          <label for="alias">别名:</label>
          <input type="text" id="alias" placeholder="请输入翻译内容的别名">
        </div>
        <button class="save-btn" id="saveTranslationBtn">保存翻译</button>
      </div>
    </div>
    
    <div class="settings-form" id="settingsForm">
      <h3>设置</h3>
      <div class="form-group">
        <label for="apiUrl">API URL:</label>
        <input type="text" id="apiUrl" placeholder="请输入API地址">
      </div>
      <div class="form-group">
        <label for="apiKey">API Key:</label>
        <input type="password" id="apiKey" placeholder="请输入API密钥">
      </div>
      <div class="form-group">
        <label for="sourceLang">当前语言:</label>
        <input type="text" id="sourceLang" placeholder="请输入原始语言">
        <!-- <select id="sourceLang">
          <option value="英语">英语</option>
          <option value="中文">中文</option>
          <option value="日语">日语</option>
          <option value="韩语">韩语</option>
        </select> -->
      </div>
      <div class="form-group">
        <label for="targetLang">目标语言:</label>
        <input type="text" id="targetLang" placeholder="请输入目标语言">
        <!-- <select id="targetLang">
          <option value="中文">中文</option>
          <option value="英语">英语</option>
          <option value="日语">日语</option>
          <option value="韩语">韩语</option>
        </select> -->
      </div>
      <div class="form-group">
        <label for="translateRole">翻译角色:</label>
        <input type="text" id="translateRole" placeholder="例如：技术文档翻译员">
      </div>
      <button class="save-btn" id="saveBtn">保存</button>
      <button class="back-btn" id="backBtn">返回</button>
    </div>

    <!-- 引用外部脚本 -->
    <script src="config.js"></script>
    <script src="popup.js"></script>
  </body>
</html>